<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>会员转卡</title>
<style>
	.div_1{
		padding-top:7px;
		font-size:14px;
	}
</style>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<script src="../layui/layui.js"></script>
   <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
     <legend>会员转卡</legend>
   </fieldset> 
<form action="##" class="layui-form" onsubmit="return false" id="form">
  <div class="layui-collapse">
   <div class="layui-colla-item">
     <h2 class="layui-colla-title">原会员信息</h2>
      <div class="layui-colla-content layui-show">
            <!-- 第一行 -->
		     <div class="layui-form-item">	  
		       <label class="layui-form-label">会员卡号：</label>
			     <div class="layui-input-inline">
			     	<div class="div_1">
			     		<span th:text="${memT.memberId}"></span>
			     		<input type="hidden" th:value="${memT.memberId}" class="layui-input">
			     	</div>
			     </div>
			   <label class="layui-form-label">会员姓名：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.memberName}"></span>
			     		<input type="hidden" th:value="${memT.memberName}" class="layui-input">
			     	</div>
    		      </div>
    		   <label class="layui-form-label">会员类型：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.memberType}"></span>
			     		<input type="hidden" th:value="${memT.memberType}" class="layui-input">
			     	</div>
      		     </div>
      		   <label class="layui-form-label">会员性别：</label>
			     <div class="layui-input-inline">
			     	<div class="div_1">
			     		<span th:text="${memT.memberSex}"></span>
			     		<input type="hidden" th:value="${memT.memberSex}" class="layui-input">
			     	</div>
			     </div>
		   </div>
		   <!-- 第二行 -->
		   <div class="layui-form-item">	  
		       <label class="layui-form-label">加入时间：</label>
			     <div class="layui-input-inline">
			     	<div class="div_1">
			     		<span th:text="${memT.joinTime}"></span>
			     		<input type="hidden" th:value="${memT.joinTime}" class="layui-input">
			     	</div>
			     </div>
			   <label class="layui-form-label">出生日期：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.memberBirthday}"></span>
			     		<input type="hidden" th:value="${memT.memberBirthday}" class="layui-input">
			     	</div>
    		      </div>
    		   <label class="layui-form-label">支付方式：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.payment}"></span>
			     		<input type="hidden" th:value="${memT.payment}" class="layui-input">
			     	</div>
      		      </div>
      		   <label class="layui-form-label">证件类型：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.idcardType}"></span>
			     		<input type="hidden" th:value="${memT.idcardType}" class="layui-input">
			     	</div>
      		     </div>
		   </div>
		   <!-- 第三行 -->
		   <div class="layui-form-item">	  
		       <label class="layui-form-label">身份证号：</label>
			     <div class="layui-input-inline">
			     	<div class="div_1">
			     		<span th:text="${memT.idcardNumber}"></span>
			     		<input type="hidden" th:value="${memT.idcardNumber}" class="layui-input">
			     	</div>
			     </div>
			   <label class="layui-form-label">健身需求：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.memberNeeds}"></span>
			     		<input type="hidden" th:value="${memT.memberNeeds}" class="layui-input">
			     	</div>
    		      </div>
    		   <label class="layui-form-label">备注：</label>
    		      <div class="layui-input-inline">
    		      	<div class="div_1">
			     		<span th:text="${memT.memberNote}"></span>
			     		<input type="hidden" th:value="${memT.memberNote}" class="layui-input">
			     	</div>
      		      </div>
		   </div>
		</div>
	  </div>
  </div>
  <div class="layui-collapse">
   <div class="layui-colla-item">
     <h2 class="layui-colla-title">转卡会员信息</h2>
      <div class="layui-colla-content layui-show">
       <!-- 不可更改 -->
		<!-- 第一行 -->
		<div class="layui-form-item">			  
		    <label class="layui-form-label">会员姓名</label>
			<div class="layui-input-inline">
		    	<input type="text" name="memberName" id="memberName" placeholder="请输入会员姓名" autocomplete="off" class="layui-input">
		    	<input type="hidden" name="memberId" id="memberId" th:value="${memT.memberId}">
		    	<input type="hidden" name="memberType" id="memberType" th:value="${memT.memberType}">
		    	<input type="hidden" name="payment" id="paymemt" th:value="${memT.payment}">
			</div>
			<label class="layui-form-label">证件类型</label>
    		<div class="layui-input-inline">
     		<select name="idcardType" id="idcardType"  class="select">
        		<option value="">请选择证件类型</option> 
        		<option value="中华人民共和国居民身份证">中华人民共和国居民身份证</option>
        		<option value="港澳台通行证">港澳台通行证</option>
        		<option value="护照">护照</option>          
      		</select>
	    	</div>		      	
      		<label class="layui-form-label">证件编号</label>
			<div class="layui-input-inline">
		    	<input type="text" name="idcardNumber" id="idcardNumber" placeholder="请输入证件编号" autocomplete="off" class="layui-input">
			</div>
    		 
  		</div>
  		<!-- 第二行 --> 		
	    <div class="layui-form-item">
		    <label class="layui-form-label">联系电话</label>
			<div class="layui-input-inline">
		    	<input type="text" name="memberPhone" id="memberPhone" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
			</div>		
	    	<label class="layui-form-label">性别</label>
		    <div class="layui-input-inline">
		      <input type="radio" name="memberSex" value="男" title="男">
		      <input type="radio" name="memberSex" value="女" title="女" checked>
		    </div>
      		<label class="layui-form-label">出生日期</label>
	      	<div class="layui-input-inline">
	        	<input type="text" class="layui-input" name="memberBirthday" id="memberBirthday" placeholder="年/月/日">
	      	</div>
	    </div>	    
	    <!-- 第三行 -->
	    <div class="layui-form-item">		    		 
	    	<label class="layui-form-label">联系地址</label>
			<div class="layui-input-inline">
		    	<input type="text" name="memberAddress" id="memberAddress" placeholder="请输联系地址" autocomplete="off" class="layui-input">
			</div>			
			<label class="layui-form-label">健身需求</label>
			<div class="layui-input-inline">
     			<select name="memberNeeds" id="memberNeeds" class="select">		        		 
		        	<option value="减脂">减脂</option>
		        	<option value="增肌">增肌</option>
		        	<option value="塑形">塑形</option>          
	      		</select>
		    </div>	 
		    <label class="layui-form-label">密码</label>
			    <div class="layui-input-inline">
     				<input type="password" name="userPassword" id="userPassword" placeholder="请输入密码" class="layui-input">
		    </div>	    	
	    </div>	    	    
	    <!-- 第四行 -->
	    <div class="layui-form-item">       
      		<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea name="memberNote" class="layui-textarea"></textarea>
			</div>	  		    	
	    </div> 
	     <!-- 照片 -->
	    <div class="layui-form-item" style="width:450px;height:240px;margin:auto;">
	    	<div id="image" style="width:350px;height:200px;margin:auto;">
	    	</div>
            <div style="width:100px;height:40px;margin:auto;">	
	          <button type="button" class="layui-btn layui-btn-warm"style="width:100px;height:40px;" id="memberImg">
            	<i class="layui-icon"></i>拍照
             </button>
	       </div>
	    </div>
	    <div id="memberImage"></div>
	    <hr class="layui-bg-green">	    	   	    
	    <!-- 第五行按钮 -->
		<div class="layui-form-item">
		  <div class="layui-input-block" style="height:60px;width:200px;margin:auto;">
		     <input type="button" id="addsubmit" value="提交" class="layui-btn"/>
		     <input type="reset" id="addreset" value="重置" class="layui-btn layui-btn-primary"/>
	     </div>
	    </div>
	 </div>
    </div>
  </div>	
 </form>
<script src="../layui/layui.js"></script>

<script type="text/javascript">
layui.use(['element','form','laydate'],function(){
	var element=layui.element;	//定义element对象
	var form=layui.form;		//定义form对象
	var laydate=layui.laydate;  //定义时间选择器对象
	
	laydate.render({			//渲染时间选择器
		elem:'#memberBirthday'		//elem：是时间选择器的ID
	});
	
	form.render();				//渲染整个页面的form元素
});

layui.use(['layer','jquery','form','element'],function(){
	var layer=layui.layer;
	var $=layui.jquery;
	var form=layui.form;
	var element=layui.element;
	
	$("#memberPhone").blur(function(){
		var phone=document.getElementById("memberPhone");
		if(!(/^1[3456789]\d{9}$/.test(phone.value))){
			phone.focus();
			layer.msg("请输入正确的电话号码！");
		}
	});
	$("#idcardNumber").blur(function(){
		var idcardNumber=document.getElementById("idcardNumber");
		var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		if(reg.test(idcardNumber.value) === false){
			idcardNumber.focus();
			layer.msg("请输入正确的身份证号！");
		}
		if(15==idcardNumber.value.length||18==idcardNumber.value.length){
			var left=idcardNumber.value.length-12;
			var right=idcardNumber.value.length-4;
			var b=idcardNumber.value.slice(left,right);
			if(8==b.length){
				//alert(b);
				var yyyy=b.substring(0,4);
				var mm=b.substring(4,6);
				var dd=b.substring(6,8);
				var birthday=yyyy+'-'+mm+'-'+dd;
				var memberBirthday=$("#memberBirthday");
				memberBirthday.val(birthday);
			}
		}
	});
	
	$(document).on('click','#addsubmit',function(){		
		var memberName=$("#memberName").val();
		var memberBirthday=$("#memberBirthday").val();
		var phone=$("#memberPhone").val();
		var idcardType=$("#idcardType option:selected").text();
		var idcardNumber=$("#idcardNumber").val();
		var memberAddress=$("#memberAddress").val();
		var userPassword=$("#userPassword").val();
		
		if(memberName===""){
			layer.msg("会员姓名不能为空");
		}				
		else if(memberBirthday===""){
			layer.msg("会员生日不能为空");
		}							
		else if(phone===""){
			layer.msg("联系电话不能为空");
		}
		else if(idcardType==="请选择证件类型"){
			layer.msg("证件类型不能为空");
		}
		else if(idcardNumber===""){
			layer.msg("证件编号不能为空");
		}
		else if(memberAddress===""){
			layer.msg("会员住址不能为空");
		}		
		else if(userPassword===""){
			layer.msg("会员密码不能为空");
		}																	
		else{
			$.ajax({
				type:'post'
				,url:'/member/Transfer'
				,data:$("#form").serialize()
				,success:function(){
					layer.alert("成功");
					var index = parent.layer.getFrameIndex(window.name); 
					parent.layer.close(index);
				}
				,error:function(){
					alert("异常");
				}
				
			});
		}								 
	});
	
	$(document).on('click','#memberImg',function(){
		var s=$("#form1").serialize();
		var a=$("#memberId").val();
		if(a===""){
			layer.msg("会员编号不能为空！");
		}
		else{
			//alert(a);
			layer.open({
				type:2
				,title:"拍照"
				,content:'../hh?memberId='+a
				,area:['500px','500px']
				,end:function(){
					$.ajax({
						type:'get',
						url:'/api/profile/get_realpath',
						success:function(data){
						  setTimeout(show,0);		//延时显示
							function show(){
								var realPath=JSON.stringify(data.realPath);
								//alert(realPath);//输出照片的地址
								document.getElementById("image").innerHTML='<img src='+realPath+'style="width:350px;height:200px;margin:auto;">'; 
								document.getElementById("memberImage").innerHTML='<input type="hidden" name="memberImage" value='+realPath+'>';
						  }
						}
					});
				}
			});
		}
	});	
});

</script>
</body>
</html>